<template>
  <div class="setup">
    <h1>setup</h1>
    <pre>setup()会在beforeCreate(){}之前被执行</pre>
    <pre>setup()之内不支持this</pre>
    <pre class="code">
&lt;template&gt;
  {{ state }}
&lt;/template&gt;
&lt;script lang="ts"&gt;
  import { ref, Ref } from 'vue'
  export default {
    setup(props, {attrs, emit, slots}){
      
    }
  }
&lt;/script&gt;
    </pre>
    <div>{{ stu }}</div>
    <div>{{ computedCount2 }}</div>
    <a-button @click="handleChange">++++</a-button>
  </div>

  <template>
    <teleport to="body">
      123
    </teleport>
  </template>
  
</template>

<script lang="ts">
//新增onRenderTracked, onRenderTriggered两个钩子函数
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onActivated,
  onDeactivated,
  onRenderTracked,
  onRenderTriggered
} from "vue";
import { ref, Ref, isReactive, isRef, reactive, toRef, toRefs } from 'vue'
import { computed, watchEffect, watch, WritableComputedRef } from 'vue'
import { getCurrentInstance } from 'vue'
interface Student {
  name: string;
  age?: number;
  year: number;
}
// console.log(isRef(state)); 

export default {
  props: {

  },
  setup(props, context) {
    const current = getCurrentInstance()
    console.log(current)
    const { stu, computedCount } = useVueHooks(48);
    const state: Ref<string> = ref("{{state}}");

    let computedCount2: WritableComputedRef<string> = computed({
      get() {
        return state.value + 2
      },
      set(newval: string) {
        state.value = newval.toUpperCase()
      }
    })
    // console.log(computedCount2.value)

    const handleChange = () => {
      state.value += 1
      computedCount2.value = 'xiaoxie'
    }

    return { state, stu, computedCount, computedCount2, handleChange };
  },
};
const useVueHooks = (age: number) => {
  const stu: Student = reactive({
    name: "渣渣辉",
    age,
    year: 2020
  });
  // console.log(isReactive(stu));

  const computedCount = computed(() => {
    return stu.age + 'computed'
  })

  // watch(() => {
  //   return [stu.age * 2]
  // }, (val, prev) => {
  //   console.log(val, prev)
  // })

  // watchEffect(() => {
  //   // console.log('watchEffect', stu.age, stu)
  //   }, {
  //   onTrack() {
  //     // console.log('onTrack调用')   // 当反应性属性或ref作为依赖项被跟踪时
  //   },
  //   onTrigger() {
  //     // console.log('ontrigger调用') // 当观察程序回调由依赖项的变异触发时
  //   }
  // })

  return { stu, computedCount };
};
</script>

<style lang="less" scoped>
.setup {
  padding: 20px;
  height: calc(100vh - 68px);
}
.code {
  color: #fff;
  background: #000;
}
</style>
